<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="layui/css/layui.css" rel="stylesheet"/>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>打开ifarme演示</legend>
</fieldset>
    <form class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
        </div>
    </form>
<script src="layui/layui.js"></script>
<script>
    layui.use(["form","jquery","layer"],function () {
        var form=layui.form,$=layui.jquery,layer=layui.layer;//想要使用组件，必须先行引入

        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        //在修改数据之前需要去数据库进行查询
        //这个ajax会在打开页面的时候执行
        $.ajax({
            url:"testServlet",
            data:{"opr":"updateBefore","id":parent.id},
            dataType:"json",
            success:function (d) {
                $("input[name=id]").val(parent.id);
                $("input[name=name]").val(d.name);
            }
        });
        //监听提交按钮
        form.on("submit",function (data) {//data是form组件提供的数据，可以得到所有表单输入框的值
            //通过点击提交按钮，进行校验,如果通过的话，可以继续操作
            $.ajax({
                url:"testServlet?opr=update",
                data:data.field,
                dataType:"json",
                success:function (d) {
                    //d是从servlet返回的内容
                    //返回值类型是json
                   if(d.state==true){
                        parent.tableIns.reload();//让父页面中的表格重新加载
                       parent.layer.close(index);//关闭当前打开模式化窗体
                   }else{
                       layer.msg(d.meg);//如果添加失败的话，那么弹出提示信息
                   }
                }
            });
            return false;//不进行页面跳转
        });
    });
</script>
</body>
</html>